<template>
  <div class="app-container">
    <!--表单组件-->
    <el-dialog append-to-body :show-close="false" :visible="showDialog" width="300px">
      <el-upload
        ref="upload"
        action="no"
        :http-request="UploadImage"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :limit="1"
        :auto-upload="false"
      >
        <el-button slot="trigger" type="info" icon="el-icon-upload" circle />
        <div slot="tip" class="el-upload__tip" style="float: right;">支持文件格式:zip,bar,bpmn,bpmn20.xml</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="showDialog=false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </el-dialog>
    <!-- 字典列表 -->
    <el-row :gutter="10">
      <el-card class="box-card">
        <!--工具栏-->
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
            <!-- 搜索 -->
            <el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
            <rrOperation />
          </div>

          <el-button
            class="filter-item"
            size="mini"
            type="primary"
            icon="el-icon-upload"
            @click="showDialog=true"
          >上传
          </el-button>

        </div>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
          <el-table-column type="selection" width="55" />
          <el-table-column :show-overflow-tooltip="true" label="流程名称" align="center" style="cursor: pointer;">
            <template slot-scope="scope">
              <router-link :to="{path:'/workflow/diagrams/',query:{deploymentId:scope.row.deploymentId}}">
                {{ scope.row.name }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" width="150px" align="center" prop="key" label="流程标识" />
          <el-table-column width="80px" prop="version" align="center" label="版本号" />
          <el-table-column label="操作" width="180px" align="center" fixed="right">
            <!--              <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
              />
            </template>-->
            <template slot-scope="scope">
              <el-button v-permission="['admin','definitions:edit']" size="mini" style="margin-right: 3px;" type="text" @click="crud.toEdit(scope.row)">编辑</el-button>
              <el-button v-permission="['admin','definitions:del']" style="margin-left: -2px" type="text" size="mini" @click="execute(scope.row.id)">删除</el-button>
              <el-button v-if=" scope.row.modelId==null " v-permission="['admin','definitions:convert']" style="margin-left: 3px" type="text" size="mini" @click="convert(scope.row.deploymentId)">转为模型</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { convert } from '@/api/workflow/workflow'
import crudDict from '@/api/system/dict'
import CRUD, { presenter, header, form } from '@crud/crud'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import WorkFlow from '@/api/workflow/workflow'

const defaultForm = { id: null, name: null, description: null, dictDetails: [] }

export default {
  name: 'Model',
  components: { pagination, rrOperation },
  cruds() {
    return [
      CRUD({ title: '字典', url: 'api/workflow/definitions', crudMethod: { ...crudDict }})
    ]
  },
  mixins: [presenter(), header(), form(defaultForm)],
  data() {
    return {
      queryTypeOptions: [
        { key: 'name', display_name: '流程名称' },
        { key: 'key', display_name: '流程标识' }
      ],
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      permission: {
        edit: ['admin', 'definitions:edit'],
        del: ['admin', 'definitions:del']
      },
      showDialog: false
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      if (this.$refs.dictDetail) {
        this.$refs.dictDetail.query.dictName = ''
      }
      return true
    },
    // 选中字典后，设置字典详情数据
    handleCurrentChange(val) {
      if (val) {
        this.$refs.dictDetail.query.dictName = val.name
        this.$refs.dictDetail.dictId = val.id
        this.$refs.dictDetail.crud.toQuery()
      }
    },
    // 编辑前将字典明细临时清空，避免日志入库数据过长
    [CRUD.HOOK.beforeToEdit](crud, form) {
      // 将角色的菜单清空，避免日志入库数据过长
      form.dictDetails = null
    },
    submit() {
      this.$refs.upload.submit()
    },
    UploadImage(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      WorkFlow.upload(formData).then(response => {
        console.log('上传图片成功')
        param.onSuccess() // 上传成功的图片会显示绿色的对勾
        this.showDialog = false
      }).catch(response => {
        console.log('图片上传失败')
        param.onError()
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    deleteDefinitions(scope) {
      console.log('delete!')
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    onSubmit() {
      console.log('submit!')
    },
    convert(deploymentId) {
      convert(deploymentId).then(res => {
        this.$message.info('操作成功！')
      })
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
